今天我們來學習一個範例：當我們從 API 獲取一段資料，或是從陣列中渲染一個列表到 DOM 上時，該如何操作。

const dataArray = [
  {
    id: 1,
    name: "AAA"
  },
  {
    id: 2,
    name: "BBB"
  }
];

dataArray.map((item, idx) => (
  <div key={idx}>
    {item.name}
  </div>
));

從這個範例中，我們可以了解到 dataArray 透過 map 這個陣列方法，可以渲染出 JSX 的 React 元素。在這個過程中，map 方法中的回呼函式（callback function）會遍歷陣列中的每一個元素，並將每個元素渲染為一個 div 元素。

這裡值得注意的是，map 方法中的回呼函式是一個表達式（Expression）。在 JavaScript 中，表達式是指任何可以計算出值的語法結構，比如：

2 + 2
item.name
map()

表達式會返回一個值，所以在 JSX 中我們可以直接使用表達式來渲染內容。

另一方面，陳述式（Statement） 是指執行某個操作的語法結構，但它不會直接返回值。例如：

if (condition) {
  // 這是一個陳述式
  console.log('This is a statement');
}

在 JavaScript 中，陳述式用來控制程式的流程（例如條件判斷、迴圈等），而表達式則用來計算和返回值。在 JSX 中，我們通常需要使用表達式來動態生成元素或內容，因此理解陳述式與表達式的區別非常重要。